<template>
	<view>
		<text class="SavingPlan_title">存钱计划</text>
		<view class="SavingPlan_list">
			<view @click="toClockInFn(data)" v-for="data in dataSource" :key="data.id" class="SavingPlan_item">
				<view><text>备注：{{data.savePlan}}</text>
					<text>用户名：{{data.username}}</text></view>
				<view>
					<text>存钱类型：{{data.saveName}}</text>
					<text>存钱任务：{{data.avgMoeny}}$</text>
				</view>
				<view>
					<text>已存金额：{{data.hasMoney}}</text>
					<text>距离目标：{{data.avgMoeny-data.hasMoney}}$</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getSaveDetailAPI} from '@/api/api.js'
	export default {
		data() {
			return {
				dataSource:[]
			}
		},
		methods: {
          async getSaveDetail(){
			  const res=await getSaveDetailAPI()
			  this.dataSource=res.data
		  },
		  toClockInFn(data){
			  uni.navigateTo({
			  	url:`/pages/ClockIn/ClockIn?data=${encodeURIComponent(JSON.stringify(data))}`
			  })
		  }
		},
		mounted() {
			this.getSaveDetail()
			this.$bus.$on('updateSavingPlan',()=>{
				this.getSaveDetail()
			})
		}
	}
</script>

<style scoped>
	.SavingPlan_title {
		color: white;
		font-size: 40rpx;
		font-weight: bolder;
	}

	.uni-container {
		height: 400rpx;
	}
	.SavingPlan_list{
		height: 480rpx;
		overflow: scroll;
	}
	.SavingPlan_item{
		height: 200rpx;
		border: 5rpx solid yellowgreen;
		border-radius: 10rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bolder;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.SavingPlan_item>view{
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
</style>
 